<template>
  <div>
    <van-nav-bar left-arrow style="background: blue"> 
      <template #left @click="$router.push('/about')">
        <van-icon name="arrow-left" color="#fff" size="20" />
      </template>
      <template #title>
        <span style="color: #fff">快递单</span>
      </template>
    </van-nav-bar>

    <van-search
      v-model="value"
      show-action
      placeholder="快递单号"
      @search="onSearch"
      shape="round"
    >
      <template #action>
        <div @click="onSearch" class="color">搜索</div>
      </template>
    </van-search>

    <ul v-for="(item,index) in this.express" :key="index">
      <li>
        <div class="kdd">
          <div>快递单号:<span>{{item.orderCode}}</span></div>
          <van-icon name="arrow" />
        </div>
      </li>
      <hr />
      <li class="ct">
        <div class="logo"></div>
        <div>
          <div>下单时间<span>{{item.createTime}}</span></div>
          <div>收货人<span>{{item.consignor}}</span></div>
          <div>发货人<span>{{item.consignee}}</span></div>
        </div>
      </li>
      <hr />
      <li class="btn">
        <van-button type="primary" round color="orange" @click="expressBtn(item)">{{ item.star == 0 ? "评价" : "查看评价" }}</van-button>
      </li>
    </ul>
  </div>
</template>

<script>
import { getLogisticsBill } from "@/request/api";
export default {
  data() {
    return {
      value: "",
      express:[]
    };
  },
  methods: {
    onSearch() {
      getLogisticsBill({
      keyword: this.value,
      current: 1,
      size: 20,
    }).then((res) => {
      if (res.errCode == 0) {
        this.express = res.data.records
      }
    });
    },
    expressBtn(val){
      this.$router.push({path:'/expressorderevaluation',query:{val:val}})
    }
  },
  created() {
    getLogisticsBill({
      keyword: "",
      current: 1,
      size: 20,
    }).then((res) => {
      if (res.errCode == 0) {
        console.log(res.data.records);
        this.express = res.data.records
      }
    });
  },
};
</script>

<style scoped>
.color {
  color: blue;
}
ul {
  width: 100%;
  margin-top: 0.5rem;
  background: #fff;
}
.kdd {
  padding: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  width: 4rem;
  height: 4rem;
  display: inline-block;
  background: url("../assets/旗下企业-头像.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 0.8rem;
}
.ct {
  display: flex;
  align-items: center;
  padding: 0.8rem;
}
.ct span {
  margin-left: 0.5rem;
}
.btn {
  display: flex;
  justify-content: flex-end;
  padding: 0.8rem;
}
</style>